<template>
  <div class="ai-chat-container">
    <!-- 左侧历史记录 -->
    <div class="history-panel">
      <div class="history-header">
        <h3>历史会话</h3>
        <el-button type="primary" size="small" @click="createNewChat">
          <el-icon><Plus /></el-icon> 新会话
        </el-button>
      </div>
      <div class="history-list">
        <!-- 显示最多10条历史记录 -->
        <div
          v-for="(chat, index) in displayedChatHistory"
          :key="index"
          class="history-item"
          :class="{ active: currentChatId === chat.id }"
          @click="switchChat(chat.id)"
        >
          <span class="chat-title">{{ chat.title || '新研究任务' }}</span>
          <span class="chat-time">{{ formatTime(chat.createTime) }}</span>
        </div>

        <!-- 显示更多按钮 -->
        <div v-if="chatHistory.length > initialDisplayCount && !showAllHistory"
             class="history-item show-more"
             @click="showMoreHistory">
          <span class="show-more-text">显示更多...</span>
          <el-icon><ArrowDown /></el-icon>
        </div>

        <!-- 显示收起按钮 -->
        <div v-if="showAllHistory && chatHistory.length > initialDisplayCount"
             class="history-item show-more"
             @click="showLessHistory">
          <span class="show-more-text">收起</span>
          <el-icon><ArrowUp /></el-icon>
        </div>
      </div>
    </div>

    <!-- 右侧聊天区域 -->
    <div class="chat-panel">
      <!-- 聊天消息区域 -->
      <div class="chat-messages" ref="messagesContainer">
        <div v-if="messages.length === 0" class="welcome-message">
          <h2>AI行业研究助手</h2>
          <p>您可以直接输入研究需求，例如：</p>
          <div class="suggestion-list">
            <el-tag
              v-for="(suggestion, index) in instructionSuggestions"
              :key="index"
              class="suggestion-tag"
              @click="applyInstructionSuggestion(suggestion)"
              type="info"
              effect="plain"
            >
              {{ suggestion.shortText }}
              <el-tooltip
                v-if="suggestion.domain"
                :content="`将自动选择${getDomainLabel(suggestion.domain)}作为信息来源`"
                placement="top"
              >
                <el-icon class="ml-5"><InfoFilled /></el-icon>
              </el-tooltip>
            </el-tag>
          </div>
        </div>

        <div v-for="(msg, index) in messages" :key="index" class="message" :class="msg.role">
          <div class="message-avatar">
            <el-avatar :icon="msg.role === 'user' ? UserFilled : Service" />
          </div>
          <div class="message-content">
            <template v-if="msg.role === 'assistant' && msg.taskId">
              <!-- 任务状态显示 -->
              <div  class="task-status">
                <!-- 添加任务步骤展开面板 -->
                <div class="task-steps-panel">
                  <div class="section-header">
                    <h4>任务执行步骤</h4>
                    <el-button
                      type="text"
                      @click="toggleTaskSteps(msg.taskId)"
                      class="toggle-button"
                    >
                      {{ isTaskStepsExpanded(msg.taskId) ? '收起' : '展开' }}
                      <el-icon class="collapse-icon">
                        <ArrowDown v-if="!isTaskStepsExpanded(msg.taskId)" />
                        <ArrowUp v-else />
                      </el-icon>
                    </el-button>
                  </div>

                  <el-collapse-transition>
                    <div v-show="isTaskStepsExpanded(msg.taskId)" class="task-steps-content">
                      <div v-if="getTaskStatusList(msg.taskId)?.length > 0">
                        <!-- 任务状态时间线 -->
                        <el-timeline>
                          <el-timeline-item
                            v-for="(status, statusIndex) in getTaskStatusList(msg.taskId)"
                            :key="statusIndex"
                            :type="getStatusType(status.nodeStatus)"
                            :color="getStatusColor(status.nodeStatus)"
                            :timestamp="formatTimestamp(status.timestamp)"
                          >
                            <el-card class="status-card">
                              <div class="status-content">
                                <p>{{ status.message || '无消息' }}</p>
                                <div v-if="status.payload" class="status-payload">
                                  <el-button
                                    type="text"
                                    @click="togglePayload(msg.taskId, statusIndex)"
                                    class="toggle-button"
                                  >
                                    {{ isPayloadExpanded(msg.taskId, statusIndex) ? '收起详情' : '查看详情' }}
                                    <el-icon class="collapse-icon">
                                      <ArrowDown v-if="!isPayloadExpanded(msg.taskId, statusIndex)" />
                                      <ArrowUp v-else />
                                    </el-icon>
                                  </el-button>

                                  <el-collapse-transition>
                                    <div v-show="isPayloadExpanded(msg.taskId, statusIndex)" class="payload-content">
                                      <el-descriptions :column="1" border>
                                        <el-descriptions-item
                                          v-for="(value, key) in status.payload"
                                          :key="key"
                                          :label="key"
                                        >
                                          {{ formatPayloadValue(value) }}
                                        </el-descriptions-item>
                                      </el-descriptions>
                                    </div>
                                  </el-collapse-transition>
                                </div>
                              </div>
                            </el-card>
                          </el-timeline-item>
                        </el-timeline>
                      </div>
                      <div v-else class="no-data">
                        <el-empty description="任务执行中，暂无任务状态数据，请等待" />
                      </div>
                    </div>
                  </el-collapse-transition>
                </div>
              </div>

              <!-- 任务结果显示 -->
              <div v-if="msg.status === 'completed'" class="task-result">
                <markdown-renderer :content="msg.content" />

                <!-- 在任务结果底部添加网页报告按钮和提示 -->
                <div class="report-actions">
                  <el-button
                    type="primary"
                    size="small"
                    @click="generateWebReport(msg.taskId)"
                    :loading="webReportLoading[msg.taskId]"
                    class="web-report-button"
                  >
                    <el-icon><View /></el-icon> 生成网页报告
                  </el-button>
                  <div class="report-info">
                    <el-icon><InfoFilled /></el-icon>
                    <span>第一次生成网页报告可能需要几分钟时间</span>
                  </div>
                </div>

                <!-- 任务元数据折叠面板 -->
                <el-collapse v-if="msg.metadata">
                  <el-collapse-item title="查看详细数据" name="1">
                    <div v-if="msg.metadata.announcements?.length" class="metadata-section">
                      <h4>相关公告</h4>
                      <el-table :data="msg.metadata.announcements" style="width: 100%">
                        <el-table-column prop="TITLE" label="标题" />
                        <el-table-column prop="DATE_TIME" label="日期" width="120" />
                        <el-table-column label="操作" width="80">
                          <template #default="scope">
                            <el-button type="primary" link @click="openUrl(scope.row.FILE_LINK)">查看</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </div>

                    <div v-if="msg.metadata.parsedContents?.length" class="metadata-section">
                      <h4>解析数据</h4>
                      <el-table :data="msg.metadata.parsedContents" style="width: 100%">
                        <el-table-column prop="type" label="类型" width="180" />
                        <el-table-column prop="name" label="名称" />
                        <el-table-column prop="value" label="值" width="180" />
                      </el-table>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>

              <div v-else-if="msg.status === 'failed'" class="task-error">
                <el-alert
                  title="任务处理失败"
                  type="error"
                  :description="msg.content || '请尝试重新提交任务'"
                  show-icon
                />
              </div>

              <div v-else>
                {{ msg.content }}
              </div>
            </template>
            <template v-else>
              {{ msg.content }}
            </template>
          </div>
        </div>

        <!-- 加载中指示器 -->
        <div v-if="loading" class="loading-indicator">
          <el-icon class="is-loading"><Loading /></el-icon>
          <span>AI正在思考中...</span>
        </div>
      </div>

      <!-- 底部输入区域 -->
      <div class="chat-input">
        <el-form @submit.prevent="sendMessage">


          <!-- 输入框和发送按钮 -->
          <el-row :gutter="10">
            <el-col :span="20">
              <el-input
                v-model="userInput"
                type="textarea"
                :rows="3"
                placeholder="输入您的研究需求..."
                :disabled="loading"
                @keydown.enter.exact.prevent="sendMessage"
                class="message-input"
                maxlength="1000"
                show-word-limit
              />
            </el-col>
            <el-col :span="4">
              <el-button
                type="primary"
                @click="sendMessage"
                :loading="loading"
                class="send-button"
              >
                <el-icon v-if="!loading" class="send-icon"><Position /></el-icon>
                <span v-if="!loading">发送</span>
              </el-button>
            </el-col>
          </el-row>

          <!-- 高级选项折叠面板 -->
          <el-collapse v-model="activeCollapse">
            <el-collapse-item title="高级选项" name="options">
              <!-- 高级选项内容 -->
              <el-form-item label="信息来源">
                <el-select v-model="taskOptions.domain" placeholder="请选择行业领域" style="width: 100%">
                  <el-option
                      v-for="item in industryDomains"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="AI模型">
                <el-select v-model="taskOptions.model" placeholder="请选择AI模型" style="width: 100%">
                  <el-option
                      v-for="item in aiModels"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="时间范围">
                <el-radio-group v-model="selectedDateRange" @change="handleDateRangeChange">
                  <el-radio-button label="3y">近3年</el-radio-button>
                  <el-radio-button label="1y">近1年</el-radio-button>
                  <el-radio-button label="6m">近6个月</el-radio-button>
                  <el-radio-button label="3m">近3个月</el-radio-button>
                  <el-radio-button label="custom">自定义</el-radio-button>
                </el-radio-group>

                <div class="date-pickers-row" v-if="selectedDateRange === 'custom'">
                  <el-date-picker
                      v-model="taskOptions.fromdate"
                      type="date"
                      placeholder="开始日期"
                      format="YYYY-MM-DD"
                      value-format="YYYYMMDD"
                  />
                  <span class="date-separator">-</span>
                  <el-date-picker
                      v-model="taskOptions.todate"
                      type="date"
                      placeholder="结束日期"
                      format="YYYY-MM-DD"
                      value-format="YYYYMMDD"
                      :disabled-date="disableFutureDates"
                  />
                </div>
              </el-form-item>

              <el-form-item label="研究模式">
                <el-radio-group v-model="taskOptions.deep">
                  <el-radio label="1">最快响应</el-radio>
                  <el-radio label="2">深度研究</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted, nextTick, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Plus, UserFilled, Service, Loading, Download, View, ArrowDown, ArrowUp, InfoFilled, Position } from '@element-plus/icons-vue'
import dayjs from 'dayjs'
import { v4 as uuidv4 } from 'uuid'
import MarkdownRenderer from '../../components/MarkdownRenderer.vue'
import {
  submitTask,
  getTaskOutcome,
  checkTaskStatus,
  downloadPDF,
  generateTaskPDF,
  generateTaskWebpage
} from '../../api/aiResearch'
import { getIndustryDomainList } from '../../api/industryDomain'
import { getCurrentUserTaskHistory } from '../../api/taskHistory'

const router = useRouter()
const messagesContainer = ref(null)
const userInput = ref('')
const loading = ref(false)
const activeCollapse = ref([])

// 聊天历史
const chatHistory = ref([])
const currentChatId = ref('')
const messages = ref([])

// 历史记录显示控制
const initialDisplayCount = 9 // 初始显示8条
const showAllHistory = ref(false)

// 计算属性：根据showAllHistory决定显示多少条历史记录
const displayedChatHistory = computed(() => {
  if (showAllHistory.value) {
    return chatHistory.value
  } else {
    return chatHistory.value.slice(0, initialDisplayCount)
  }
})

// 显示更多历史记录
const showMoreHistory = () => {
  showAllHistory.value = true
}

// 收起历史记录
const showLessHistory = () => {
  showAllHistory.value = false
}

// 任务状态映射
const taskStatusMap = ref({})

// 任务选项
const taskOptions = reactive({
  domain: 'hkex',
  model: 'qwen-turbo-latest',
  fromdate: '',
  todate: '',
  deep: '2',
  userInstruction: ''
})

// 日期范围选择
const selectedDateRange = ref('6m')

// 日期范围预设
const dateRangePresets = {
  '3y': { months: 36 },
  '1y': { months: 12 },
  '6m': { months: 6 },
  '3m': { months: 3 },
  'custom': null
}

// 行业领域选项
const industryDomains = ref([
  { value: 'hkex', label: '港交所' },
  { value: 'cls', label: '财联社' },
  { value: 'sse', label: '上交所' },
  { value: 'szse', label: '深交所' },
])

// AI模型选项
const aiModels = ref([
  { value: 'qwen-turbo-latest', label: '通义千问' },
  { value: 'deepseek-chat', label: 'DeepSeek' },
  { value: 'gpt4', label: 'GPT-4(暂未接入)' },
  { value: 'claude', label: 'Claude(暂未接入)' },
  { value: 'llama', label: 'Llama(暂未接入)' }
])

// 自动更新相关
const autoUpdateIntervals = ref({})
const updateIntervalTime = 1200 // 5秒更新一次
const maxPollCount = 50 // 最大轮询次数
const pollCounts = ref({})

// 指令建议列表
const instructionSuggestions = ref([
  {
    shortText: 'twobu财报分析',
    fullText: '工商银行 01398 2025第一季度财报解析，要求尽量详细，与图表的形式展示',
    domain: 'hkex' // 港交所
  },
  {
    shortText: '建设银行财报分析',
    fullText: '请分析建设银行,00939财报，并且给出一份详细的财报分析对比报告，要求内容详实，图文并茂',
    domain: 'hkex' // 港交所
  },
  {
    shortText: '银行行业相关新闻',
    fullText: '内容搜索最近银行行业相关新闻。',
    domain: 'cls' // 上交所
  },
  {
    shortText: '政策法规影响',
    fullText: '内容搜索最近政策法规相关新闻，分析其对银行页的影响',
    domain: 'cls' // 深交所
  },
  {
    shortText: '跨境支付分析',
    fullText: '内容搜索最近跨境支付相关新闻',
    domain: 'cls' // 港交所
  },
  {
    shortText: '俄乌冲突对全球金融业的影响',
    fullText: '内容搜索最近俄乌冲突相关新闻，分析俄乌冲突对全球金融市场的影响',
    domain: 'cls' // 财联社
  }
])

// 任务步骤展开状态管理
const expandedTaskSteps = ref({})
const expandedPayloads = ref({})

// 切换任务步骤展开状态
const toggleTaskSteps = (taskId) => {
  if (!expandedTaskSteps.value[taskId]) {
    expandedTaskSteps.value[taskId] = true
  } else {
    expandedTaskSteps.value[taskId] = !expandedTaskSteps.value[taskId]
  }
}

// 检查任务步骤是否展开
const isTaskStepsExpanded = (taskId) => {
  return !!expandedTaskSteps.value[taskId]
}

// 切换Payload展开状态
const togglePayload = (taskId, statusIndex) => {
  const key = `${taskId}-${statusIndex}`
  if (!expandedPayloads.value[key]) {
    expandedPayloads.value[key] = true
  } else {
    expandedPayloads.value[key] = !expandedPayloads.value[key]
  }
}

// 检查Payload是否展开
const isPayloadExpanded = (taskId, statusIndex) => {
  const key = `${taskId}-${statusIndex}`
  return !!expandedPayloads.value[key]
}

// 获取任务状态列表
const getTaskStatusList = (taskId) => {
  return taskStatusMap.value[taskId] || []
}

// 获取状态类型
const getStatusType = (nodeStatus) => {
  switch (nodeStatus) {
    case 'completed':
      return 'success'
    case 'failed':
      return 'danger'
    case 'in_progress':
      return 'warning'
    default:
      return 'info'
  }
}

// 获取状态颜色
const getStatusColor = (nodeStatus) => {
  switch (nodeStatus) {
    case 'completed':
      return '#67C23A'
    case 'failed':
      return '#F56C6C'
    case 'in_progress':
      return '#E6A23C'
    default:
      return '#909399'
  }
}

// 格式化时间戳
const formatTimestamp = (timestamp) => {
  if (!timestamp) return ''
  return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss')
}

// 格式化Payload值
const formatPayloadValue = (value) => {
  if (value === null || value === undefined) return '无'
  if (typeof value === 'object') {
    try {
      return JSON.stringify(value, null, 2)
    } catch (e) {
      return String(value)
    }
  }
  return String(value)
}

// 创建新聊天
const createNewChat = () => {
  const newChatId = uuidv4()
  chatHistory.value.unshift({
    id: newChatId,
    title: '新研究任务',
    createTime: new Date()
  })

  // 清空当前消息
  messages.value = []

  // 停止所有现有的轮询
  Object.keys(autoUpdateIntervals.value).forEach(taskId => {
    stopTaskPolling(taskId)
  })

  // 设置当前聊天ID
  currentChatId.value = newChatId

  // 重置输入框和任务选项
  userInput.value = ''
  resetTaskOptions()

  // 显示欢迎消息（如果有的话）
  // 这里不需要添加任何消息，因为当messages为空时，模板会显示欢迎消息
}

// 重置任务选项
const resetTaskOptions = () => {
  // 重置为默认值
  Object.assign(taskOptions, {
    domain: 'hkex',
    model: 'qwen-turbo-latest',
    fromdate: '',
    todate: '',
    deep: '2',
    userInstruction: ''
  })

  // 重置日期范围
  selectedDateRange.value = '6m'
  handleDateRangeChange('6m')

  // 重置折叠面板
  activeCollapse.value = []
}

// 切换聊天
const switchChat = async (chatId) => {
  if (currentChatId.value === chatId) return

  currentChatId.value = chatId
  messages.value = [] // 清空当前消息

  // 停止所有现有的轮询
  Object.keys(autoUpdateIntervals.value).forEach(taskId => {
    stopTaskPolling(taskId)
  })

  // 获取当前聊天项
  const chatItem = chatHistory.value.find(item => item.id === chatId)

  // 如果是新建的聊天（没有关联任务ID），则不加载任何内容
  if (chatItem && chatItem.title === '新研究任务' && !chatItem.taskId) {
    // 重置任务选项
    resetTaskOptions()
    return
  }

  // 如果是历史任务ID，加载任务结果和状态
  if (chatId) {
    try {
      loading.value = true

      // 添加用户消息占位符
      if (chatItem) {
        messages.value.push({
          role: 'user',
          content: chatItem.title
        })
      }

      // 添加系统响应占位符
      messages.value.push({
        role: 'assistant',
        content: '正在加载历史任务结果...',
        taskId: chatId,
        status: 'in_progress'
      })

      // 获取任务结果
      const resultRes = await getTaskOutcome(chatId)
      if (resultRes.code === 200 && resultRes.data) {
        // 更新消息
        const messageIndex = messages.value.length - 1
        messages.value[messageIndex] = {
          role: 'assistant',
          content: resultRes.data.outcome?.response || '无结果内容',
          taskId: chatId,
          status: resultRes.data.status,
          metadata: resultRes.data.outcome?.metadata
        }

        // 如果任务仍在进行中，启动轮询
        if (resultRes.data.status === 'in_progress') {
          // 初始化轮询计数
          pollCounts.value[chatId] = 0

          // 启动自动更新
          startTaskPolling(chatId)
        } else {
          // 获取任务状态（即使任务已完成，也获取状态以显示步骤）
          await fetchTaskStatus(chatId)
        }
      }
    } catch (error) {
      console.error('加载任务结果失败', error)
      ElMessage.error('加载任务结果失败')
    } finally {
      loading.value = false
      scrollToBottom()
    }
  }
}

// 发送消息时更新聊天历史
const sendMessage = async () => {
  if (!userInput.value.trim()) return

  // 添加用户消息
  messages.value.push({
    role: 'user',
    content: userInput.value
  })

  // 清空输入框
  const userMessage = userInput.value
  userInput.value = ''

  // 滚动到底部
  await nextTick()
  scrollToBottom()

  // 显示加载状态
  loading.value = true

  try {
    // 准备任务提交数据
    const taskData = {
      ...taskOptions,
      userInstruction: userMessage,
      timestamp: new Date().toISOString()
    }

    // 添加系统响应占位
    const messageIndex = messages.value.length
    messages.value.push({
      role: 'assistant',
      content: '正在处理您的研究请求...',
      status: 'pending'
    })

    // 提交任务
    const res = await submitTask(taskData)

    if (res.code === 200) {
      const taskId = res.data.taskId

      // 更新消息
      messages.value[messageIndex] = {
        role: 'assistant',
        content: '您的研究任务已提交，正在处理中...',
        taskId: taskId,
        status: 'in_progress'
      }

      // 初始化轮询计数
      pollCounts.value[taskId] = 0

      // 启动自动更新
      startTaskPolling(taskId)

      // 更新聊天标题和关联的任务ID
      updateChatTitle(userMessage, taskId)
    } else {
      // 更新消息为错误状态
      messages.value[messageIndex] = {
        role: 'assistant',
        content: `任务提交失败: ${res.message || '未知错误'}`,
        status: 'failed'
      }
    }
  } catch (error) {
    // 添加错误消息
    messages.value.push({
      role: 'assistant',
      content: `发生错误: ${error.message || '未知错误'}`,
      status: 'failed'
    })
  } finally {
    loading.value = false
    scrollToBottom()
  }
}

// 更新聊天标题和关联的任务ID
const updateChatTitle = (message, taskId) => {
  const chatIndex = chatHistory.value.findIndex(chat => chat.id === currentChatId.value)
  if (chatIndex !== -1) {
    // 使用消息的前20个字符作为标题
    const title = message.length > 20 ? message.substring(0, 20) + '...' : message
    chatHistory.value[chatIndex].title = title

    // 关联任务ID
    chatHistory.value[chatIndex].taskId = taskId
  }
}

// 启动任务轮询
const startTaskPolling = (taskId) => {
  // 先停止现有的轮询
  stopTaskPolling(taskId)

  // 立即获取一次状态和结果
  fetchTaskStatus(taskId)
  fetchTaskResult(taskId)

  // 设置定时器
  autoUpdateIntervals.value[taskId] = setInterval(() => {
    fetchTaskStatus(taskId)
    fetchTaskResult(taskId)
  }, updateIntervalTime)
}

// 停止任务轮询
const stopTaskPolling = (taskId) => {
  if (autoUpdateIntervals.value[taskId]) {
    clearInterval(autoUpdateIntervals.value[taskId])
    delete autoUpdateIntervals.value[taskId]
  }
}

// 获取任务状态 - 关键函数，用于实时更新任务步骤
const fetchTaskStatus = async (taskId) => {
  try {
    console.log(`获取任务状态: ${taskId}`)
    const res = await checkTaskStatus(taskId)
    console.log(`任务状态响应:`, res) // 添加日志

    if (res.code === 200) {
      // 处理不同的数据结构
      let statusList = []

      if (res.data && res.data.data) {
        // 标准结构: { data: { data: [...] } }
        statusList = res.data.data
      } else if (Array.isArray(res.data)) {
        // 数组结构: { data: [...] }
        statusList = res.data
      } else if (res.data && typeof res.data === 'object') {
        // 对象结构: { data: { key1: {...}, key2: {...} } }
        statusList = []
        for (const key in res.data) {
          if (typeof res.data[key] === 'object') {
            statusList.push({
              ...res.data[key],
              stepId: key
            })
          }
        }
      }

      console.log(`处理后的状态列表:`, statusList) // 添加日志

      // 更新任务状态映射
      if (statusList && statusList.length > 0) {
        taskStatusMap.value[taskId] = statusList
      } else {
        console.warn(`任务状态列表为空: ${taskId}`)
      }
    } else {
      console.error(`获取任务状态失败: ${taskId}`, res.message)
    }
  } catch (error) {
    console.error(`获取任务状态异常: ${taskId}`, error)
  }
}

// 获取任务结果
const fetchTaskResult = async (taskId) => {
  try {
    console.log(`获取任务结果: ${taskId}`)
    const res = await getTaskOutcome(taskId)
    console.log(`任务结果响应:`, res) // 添加日志

    if (res.code === 200) {
      const taskResult = res.data
      console.log(`任务结果数据:`, taskResult) // 添加日志

      // 查找对应的消息
      const messageIndex = messages.value.findIndex(msg => msg.taskId === taskId)
      if (messageIndex !== -1) {
        // 更新消息状态
        if (taskResult) {
          messages.value[messageIndex].status = taskResult.status || 'unknown'

          // 如果任务完成，更新内容
          if (taskResult.status === 'completed' && taskResult.outcome) {
            messages.value[messageIndex].content = taskResult.outcome.response || '无结果内容'
            messages.value[messageIndex].metadata = taskResult.outcome.metadata

            // 停止轮询
            stopTaskPolling(taskId)
          } else if (taskResult.status === 'failed') {
            messages.value[messageIndex].content = taskResult.outcome?.response || '任务处理失败，请尝试重新提交'
            stopTaskPolling(taskId)
          }
        } else {
          console.warn(`任务结果数据为空: ${taskId}`)
        }
      } else {
        console.warn(`未找到对应的消息: ${taskId}`)
      }
    } else {
      console.error(`获取任务结果失败: ${taskId}`, res.message)
    }
  } catch (error) {
    console.error('获取任务结果失败', error)
  }
}

// 计算任务进度
const calculateTaskProgress = (taskId) => {
  const statusList = taskStatusMap.value[taskId]
  if (!statusList || statusList.length === 0) return 10

  // 简单计算：完成的步骤数 / 总步骤数 * 100
  const completedSteps = statusList.filter(s => s.nodeStatus === 'completed').length
  const totalSteps = statusList.length

  // 确保至少有10%的进度
  return Math.max(10, Math.min(95, (completedSteps / totalSteps) * 100))
}

// 进度格式化
const progressFormat = (percentage) => {
  return percentage < 100 ? `${Math.round(percentage)}%` : '完成'
}

// 获取最新状态消息
const getLatestStatusMessage = (taskId) => {
  const statusList = taskStatusMap.value[taskId]
  if (!statusList || statusList.length === 0) {
    return '正在初始化任务...'
  }

  // 获取最新的状态消息
  const latestStatus = statusList[statusList.length - 1]
  return latestStatus.message || '正在处理...'
}

// 下载PDF报告
const downloadPDFReport = async (taskId) => {
  try {
    await generateTaskPDF(taskId)
    await downloadPDF(taskId)
    ElMessage.success('报告下载成功')
  } catch (error) {
    ElMessage.error('报告下载失败: ' + error.message)
  }
}

// 查看任务详情
const viewTaskDetails = (taskId) => {
  router.push(`/ai-research?taskId=${taskId}`)
}

// 应用指令建议
const applyInstructionSuggestion = (suggestion) => {
  // 填充用户输入
  userInput.value = suggestion.fullText

  // 如果建议中包含指定的信息来源，则自动选择
  if (suggestion.domain) {
    taskOptions.domain = suggestion.domain

    // 如果高级选项面板未展开，则自动展开它以显示选择的信息来源
    if (!activeCollapse.value.includes('options')) {
      activeCollapse.value = ['options']
    }
  }

  // 滚动到底部并聚焦输入框
  nextTick(() => {
    scrollToBottom()
    const textarea = document.querySelector('.message-input textarea')
    if (textarea) {
      textarea.focus()
    }
  })
}

// 处理日期范围变化
const handleDateRangeChange = (range) => {
  if (range === 'custom') return

  const preset = dateRangePresets[range]
  if (preset) {
    const toDate = dayjs()
    const fromDate = toDate.subtract(preset.months, 'month')

    taskOptions.todate = toDate.format('YYYYMMDD')
    taskOptions.fromdate = fromDate.format('YYYYMMDD')
  }
}

// 禁用未来日期
const disableFutureDates = (date) => {
  return date > dayjs().endOf('day')
}

// 格式化时间
const formatTime = (time) => {
  if (!time) return ''
  return dayjs(time).format('MM-DD HH:mm')
}

// 滚动到底部
const scrollToBottom = () => {
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
  }
}

// 打开URL
const openUrl = (url) => {
  if (!url) return
  const baseUrl = 'https://www1.hkexnews.hk' //港交所的域名，后续需要根据信息来源字段更换
  window.open(baseUrl+url, '_blank');

}

// 获取行业领域
const fetchIndustryDomains = async () => {
  try {
    const res = await getIndustryDomainList()
    if (res.code === 200 && res.data && res.data.length > 0) {
      // 如果API返回了数据，使用API数据
      industryDomains.value = res.data.map(item => ({
        value: item.industryDomainId || item.code,
        label: item.industryDomainName || item.name
      }))
    } else {
      console.log('使用默认行业领域数据')
      // API没有返回数据，已经使用了默认数据，不需要额外操作
    }
  } catch (error) {
    console.error('获取行业领域失败，使用默认数据', error)
    // 出错时已经使用了默认数据，不需要额外操作
  }
}

// 加载历史任务
const loadHistoryTasks = async () => {
  try {
    const res = await getCurrentUserTaskHistory()
    if (res.code === 200 && res.data) {
      // 将历史任务转换为聊天历史格式
      chatHistory.value = res.data.map(task => ({
        id: task.taskId,
        title: task.userInstruction || '新研究任务',
        createTime: task.createTime
      }))

      // 如果有历史任务，默认选择第一个
      if (chatHistory.value.length > 0 && !currentChatId.value) {
        switchChat(chatHistory.value[0].id)
      }
    }
  } catch (error) {
    console.error('获取历史任务失败', error)
    ElMessage.error('获取历史任务失败')
  }
}

// 获取单个任务历史
const fetchSingleTaskHistory = async (taskId) => {
  try {
    // 这里可以调用获取单个任务详情的API
    const res = await getTaskOutcome(taskId)
    if (res.code === 200 && res.data) {
      // 添加到聊天历史
      const taskTitle = res.data.userInstruction || '历史研究任务'
      chatHistory.value.unshift({
        id: taskId,
        title: taskTitle,
        createTime: new Date(),
        taskId: taskId,
        finishFlag: res.data.status === 'completed'
      })

      // 切换到该任务
      switchChat(taskId)
    }
  } catch (error) {
    console.error('获取单个任务历史失败', error)
    ElMessage.error('获取任务详情失败')
    // 如果获取失败，创建新会话
    createNewChat()
  }
}

// 添加网页报告加载状态对象
const webReportLoading = ref({})

// 添加生成网页报告的函数
const generateWebReport = async (taskId) => {
  if (!taskId) return

  try {
    // 设置加载状态
    webReportLoading.value[taskId] = true

    // 显示生成中的消息，提示用户这可能需要较长时间
    ElMessage({
      type: 'info',
      message: '正在生成网页报告，这可能需要几分钟时间，请耐心等待...',
      duration: 800
    })

    // 调用API生成网页报告
    const res = await generateTaskWebpage(taskId, false)

    if (res.code === 200 && res.data && res.data.webpageUrl) {
      // 在新窗口打开网页报告
      window.open(res.data.webpageUrl, '_blank')
      ElMessage.success('网页报告生成成功')
    } else {
      ElMessage.error(res.message || '生成网页报告失败')
    }
  } catch (error) {
    console.error('生成网页报告失败', error)

    // 提供更详细的错误信息
    if (error.message && error.message.includes('timeout')) {
      ElMessage({
        type: 'error',
        message: '生成网页报告超时。报告生成需要较长时间，请稍后再试或联系管理员。',
        duration: 10000
      })
    } else {
      ElMessage.error('生成网页报告失败: ' + (error.message || '未知错误'))
    }
  } finally {
    // 清除加载状态
    webReportLoading.value[taskId] = false
  }
}

// 组件挂载时
onMounted(() => {
  fetchIndustryDomains()
  handleDateRangeChange(selectedDateRange.value)
  loadHistoryTasks() // 加载历史任务
})

// 组件卸载时
onUnmounted(() => {
  // 清理所有轮询
  Object.keys(autoUpdateIntervals.value).forEach(taskId => {
    stopTaskPolling(taskId)
  })
})

// 获取domain的显示标签
const getDomainLabel = (domainValue) => {
  const domain = industryDomains.value.find(item => item.value === domainValue)
  return domain ? domain.label : domainValue
}
</script>

<style scoped>
.ai-chat-container {
  display: flex;
  height: calc(100vh - 100px);
  background-color: #f5f7fa;
  width: 100%;
}

.history-panel {
  width: 280px; /* 增加宽度 */
  border-right: 1px solid #e6e6e6;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.history-header {
  padding: 15px;
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.history-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.history-item {
  padding: 10px 15px;
  border-radius: 6px;
  margin-bottom: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.history-item:hover {
  background-color: #f5f7fa;
}

.history-item.active {
  background-color: #ecf5ff;
}

.chat-title {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-time {
  font-size: 12px;
  color: #909399;
  margin-top: 4px;
}

/* 显示更多按钮样式 */
.history-item.show-more {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #409EFF;
  font-size: 13px;
  padding: 8px 15px;
}

.show-more-text {
  margin-right: 5px;
}

.history-item.show-more:hover {
  background-color: #ecf5ff;
}

.chat-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  max-width: 1200px; /* 设置最大宽度 */
  margin: 0 auto; /* 居中显示 */
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 30px;
  width: 100%;
  max-width: 1200px; /* 设置最大宽度 */
  margin: 0 auto; /* 居中显示 */
}

.welcome-message {
  text-align: center;
  padding: 40px 20px;
}

.suggestion-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.suggestion-tag {
  margin: 5px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.ml-5 {
  margin-left: 5px;
}

.message {
  display: flex;
  margin-bottom: 20px;
}

.message.assistant {
  flex-direction: row; /* 用户消息从左到右 */
}

.message.user {
  flex-direction: row-reverse; /* AI消息从右到左 */
}

.message-avatar {
  margin: 0 12px;
}

.message-content {
  padding: 16px 20px;
  border-radius: 8px;
  max-width: 90%; /* 增加最大宽度 */
  width: 90%; /* 固定宽度为90% */
  min-width: 300px; /* 设置最小宽度 */
}

.message.user .message-content {
  background-color: #f5f7fa;
  text-align: left;
  margin-left: auto; /* 用户消息靠右 */
  margin-right: 0;
}

.message.assistant .message-content {
  background-color: #ecf5ff;
  text-align: left;
  margin-left: 0; /* AI消息靠左 */
  margin-right: auto;
  width: 95%; /* AI消息固定为更大宽度 */
}

/* 确保任务状态和结果在AI消息中正确显示 */
.message.assistant .task-status,
.message.assistant .task-result,
.message.assistant .task-error {
  text-align: left;
  width: 100%;
}

.task-status {
  margin-bottom: 10px;
}

.progress-message {
  margin-top: 5px;
  font-size: 14px;
  color: #606266;
}

.task-result {
  width: 100%;
  line-height: 1.8; /* 增加行高 */
  font-size: 15px; /* 增加字体大小 */
}

.metadata-section {
  margin-top: 20px;
  width: 100%;
}

.action-buttons {
  margin-top: 15px;
  display: flex;
  gap: 10px;
}

.loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: #909399;
}

/* 输入区域样式 */
.chat-input {
  padding: 15px;
  border-top: 1px solid #e6e6e6;
  background-color: #fff;
}

/* 确保el-row没有默认margin */
.chat-input .el-row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 消息输入框样式 */
.message-input {
  width: 100%;
  height: 100%;
}

/* 确保textarea填满容器 */
.message-input :deep(.el-textarea) {
  height: 100%;
}

.message-input :deep(.el-textarea__inner) {
  height: 100% !important;
  resize: none;
  min-height: 80px;
}

/* 发送按钮样式 */
.send-button {
  width: 100%;
  height: 100% !important;
  min-height: 80px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #409EFF, #007bff);
  border: none;
  box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3);
}

.send-icon {
  margin-right: 8px;
  font-size: 18px;
}

/* 确保高级选项正常显示 */
:deep(.el-collapse) {
  width: 100%;
  margin-bottom: 15px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .el-col-20, .el-col-4 {
    width: 100%;
  }

  .send-button {
    margin-top: 10px;
    min-height: 45px;
  }
}

/* 添加脉冲动画效果 */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
  }
}

.send-button:not(.is-loading) {
  animation: pulse 2s infinite;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .chat-input {
    padding: 10px;
  }

  .input-container {
    flex-direction: column; /* 在移动设备上改为垂直排列 */
  }

  .send-button {
    width: 100%; /* 在移动设备上占满宽度 */
    height: 45px; /* 在移动设备上减小高度 */
    margin-top: 10px; /* 在移动设备上添加顶部边距 */
  }
}

/* 添加任务步骤相关样式 */
.task-steps-panel {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  width: 100%; /* 确保面板占满消息宽度 */
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px; /* 增加内边距 */
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
}

.toggle-button {
  font-size: 14px;
  color: #409EFF;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.collapse-icon {
  margin-left: 5px;
  font-size: 16px;
}

.task-steps-content {
  padding: 20px; /* 增加内容区域内边距 */
  border-top: 1px solid #ebeef5;
}

.status-card {
  margin-bottom: 15px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.status-content {
  display: flex;
  flex-direction: column;
  padding: 15px; /* 增加内边距 */
}

.status-payload {
  margin-top: 10px;
  border-top: 1px solid #ebeef5;
  padding-top: 10px;
}

.payload-content {
  margin-top: 12px;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  padding: 15px;
  background-color: #f8f9fa;
  width: 100%;
  overflow-x: auto; /* 添加水平滚动 */
}

.no-data {
  padding: 20px;
  text-align: center;
}

/* 时间线样式调整 */
:deep(.el-timeline) {
  padding-left: 10px; /* 减少左侧内边距 */
}

:deep(.el-timeline-item__content) {
  width: 100%; /* 确保内容区域宽度 */
}

/* 调整描述列表样式 */
:deep(.el-descriptions) {
  width: 100%;
}

:deep(.el-descriptions__body) {
  width: 100%;
}

/* 详细数据折叠面板样式 */
:deep(.el-collapse) {
  width: 100%;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  margin-top: 20px;
  overflow: hidden;
}

:deep(.el-collapse-item__header) {
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 500;
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
}

:deep(.el-collapse-item__content) {
  padding: 20px;
}

/* 元数据部分样式 */
.metadata-section {
  margin-top: 20px;
  margin-bottom: 15px;
  width: 100%;
}

/* 表格样式调整 */
:deep(.el-table) {
  width: 100%;
  margin-bottom: 15px;
  border-radius: 6px;
  overflow: hidden;
}

:deep(.el-table th.el-table__cell) {
  background-color: #f5f7fa;
  font-weight: 500;
}

:deep(.el-table__row:hover) {
  background-color: #f0f7ff;
}

/* 表格内按钮样式 */
:deep(.el-table .el-button--link) {
  padding: 4px 8px;
}

/* 报告操作按钮样式 */
.report-actions {
  display: flex;
  margin-top: 20px;
  justify-content: flex-start; /* 改为左对齐 */
  align-items: center;
  gap: 15px;
}

.report-actions .el-button {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.report-actions .el-icon {
  margin-right: 6px;
  font-size: 16px;
}

/* 报告信息提示样式 */
.report-info {
  display: flex;
  align-items: center;
  color: #909399;
  font-size: 13px;
  margin-right: auto;
}

.report-info .el-icon {
  margin-right: 5px;
  font-size: 14px;
  color: #E6A23C;
}

/* 网页报告按钮特殊样式 */
.web-report-button {
  background: linear-gradient(135deg, #409EFF, #007bff);
  border: none;
  color: white;
  box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3);
  min-width: 160px; /* 增加最小宽度 */
  padding: 10px 20px; /* 增加内边距 */
  font-size: 14px; /* 增加字体大小 */
  height: auto; /* 自动调整高度 */
}

.web-report-button .el-icon {
  margin-right: 8px;
  font-size: 18px; /* 增加图标大小 */
}

.web-report-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.4);
  background: linear-gradient(135deg, #66b1ff, #0069d9);
}

.web-report-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

/* 加载状态样式 */
.web-report-button.is-loading {
  background: linear-gradient(135deg, #409EFF, #007bff);
  opacity: 0.8;
}

/* 添加脉冲动画效果 */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
  }
}

.web-report-button:not(.is-loading) {
  animation: pulse 2s infinite;
}

/* 确保在移动设备上也能正常显示 */
@media (max-width: 768px) {
  .report-actions {
    flex-direction: column;
    align-items: flex-start; /* 改为左对齐 */
    gap: 10px;
  }

  .web-report-button {
    width: 100%; /* 在移动设备上占满宽度 */
    justify-content: center;
  }

  .report-info {
    margin-top: 5px;
  }
}
</style>
